Learning Web Development - Curriculum and Resources
Learning to code as a designer may feel like a huge undertaking. And frankly, learning a new craft is a huge effort. But in my opinion, it is well worth it. As a designer, it's very good to be able to understand the design details, how things are implemented, and how people who make the detailed design decisions think and act. And because it is hard, it is a rare skill and good for your job security.
Start from what you know
Firstly, use any opportunity you have. And build on what you know. Need to work with SVG files? Learn to edit them? Maybe Web typography is your thing? Or you maybe you feel like starting from Web layout? Or by building a agency website? Or by building a retro game in few hours?
OR maybe you want to go slow, and start with webflow, to get the mindset and concepts first?
Learn what you can use in your work
Typically a good path looks like this:
- Learn to use Chrome dev tools
- Learn CSS & HTML & SVG
- Learn technical accessibility
- Learn JavaScript
- Learn version control and git
This is my collection of good resources.
1. Learn the browser tools to inspect and edit your designs
- Learn to use browser developer tools. This hands down THE simplest way to start doing something useful. Knowing how to inspect and edit UI's lets you draw less, inspect your designs better and play with variations without needing to draw anything.
2. Learn CSS and HTML and SVG
- Flexbox Zombies teaches you CSS flexbox layout
- SVG tutorials
- CSS layout tutorials
- Podcast: Syntax 158: The Fundamentals - HTML + CSS
- CSS podcast
- Blog: CSS in Real Life
Paid resources
- Learn Eleventy From Scratch teaches you the basics of HTML, CSS, accessibility by building a example site.
- HTML for web designers
- Practical SVG
- On Web Typography
- CSS3 for Web Designers
- Responsive design: Pattersn and principles
- Going Responsive
- Learn CSS From Scratch (upcoming)
- Learn Motion Design in CSS with Rachel Nabors, Animation Expert
- Learn Modern CSS Layout Techniques with Flexbox, Grid, CSS Calc and CSS Custom Properties
3. Learn accessibility
- The All-in-One Digital Accessibility eBook
- a11y project
- Using ARIA
- How I audit a werbsite for accessibility
Paid resources
4. Learn Javascript
- Get started is the first book. in You Don't Know JS yet series. The whole series is readable free online.
- Eloquent Javascript
- Codewars
- Podcast: Javascript Jabber
- Podcast: Syntax